<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>互联网创新实验室 - 招新系统</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 设置网页图标 -->
  <link rel="icon" href="/img/logo.png" type="image/jpeg">
</head>
<!-- Tailwind 配置 -->
<script>

  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#165DFF',
          secondary: '#36BFFA',
          dark: '#1D2939',
          light: '#F9FAFB',
          accent: '#7B61FF',
          success: '#039855',
          warning: '#F79009',
          danger: '#D92D20',
        },
        fontFamily: {
          inter: ['Inter', 'system-ui', 'sans-serif'],
        },
        animation: {
          'fade-in': 'fadeIn 0.5s ease-in-out',
          'slide-up': 'slideUp 0.5s ease-out',
          'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        },
        keyframes: {
          fadeIn: {
            '0%': { opacity: '0' },
            '100%': { opacity: '1' },
          },
          slideUp: {
            '0%': { transform: 'translateY(20px)', opacity: '0' },
            '100%': { transform: 'translateY(0)', opacity: '1' },
          }
        }
      },
    }
  }
</script>

<!-- 自定义工具类 -->
<style type="text/tailwindcss">
  @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .btn-primary {
        @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary/50;
      }
      .btn-secondary {
        @apply bg-white text-primary border border-primary px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/5 hover:shadow-md active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary/50;
      }
      .input-field {
        @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300 outline-none;
      }
      .section-padding {
        @apply py-16 md:py-24;
      }
    }
    /* 弹窗背景遮罩样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      display: none;
    }
    /* 弹窗内容样式 */
    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      width: 400px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark antialiased">
  <!-- 导航栏 -->
  <header id="navbar"
    class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16 md:h-20">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <img src="/img/logo.png" alt="互联网实验室logo" class="w-10 h-10 rounded-lg">
          <span class="text-xl font-bold text-dark">互联网创新实验室</span>
        </div>

        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#home" class="nav-link text-dark hover:text-primary font-medium transition-colors">首页</a>
          <!-- <a href="#forum" class="nav-link text-dark hover:text-primary font-medium transition-colors">招新论坛</a> -->
          <a href="#apply" class="nav-link text-dark hover:text-primary font-medium transition-colors">在线报名</a>
          <a href="#result" class="nav-link text-dark hover:text-primary font-medium transition-colors">结果查询</a>
          <!-- <a href="#notices" class="nav-link text-dark hover:text-primary font-medium transition-colors">通知公告</a> -->
          <!-- <a href="login.html" class="nav-link text-dark hover:text-primary font-medium transition-colors"
            target="_blank">登录</a> -->
          <!-- 通知公告下拉菜单 -->
          <div class="relative group">
            <a href="#notices" class="nav-link text-dark hover:text-primary font-medium transition-colors flex items-center">
              通知公告
              <span class="ml-1 w-2 h-2 bg-danger rounded-full relative">
                <!-- 消息提醒动画 -->
                <span class="absolute -inset-1 bg-danger rounded-full animate-ping opacity-75"></span>
              </span>
            </a>
          
            <!-- 下拉菜单内容 -->
            <div
              class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl overflow-hidden z-50 transform scale-95 opacity-0 invisible group-hover:scale-100 group-hover:opacity-100 group-hover:visible transition-all duration-200 origin-top-right">
              <div class="p-4 border-b border-gray-100 bg-gray-50">
                <h3 class="font-bold text-gray-800">最新通知</h3>
              </div>
          
              <div class="max-h-80 overflow-y-auto">
                <!-- 通知列表 -->
                <a href="#" class="block p-4 border-b border-gray-100 hover:bg-gray-50 transition-colors">
                  <div class="flex justify-between items-start">
                    <div>
                      <h4 class="font-medium text-gray-800">招新报名截止时间延长通知</h4>
                      <p class="text-sm text-gray-500 mt-1">暂定</p>
                    </div>
                    <span class="text-xs text-gray-400">2小时前</span>
                  </div>
                </a>
          
                <a href="#" class="block p-4 border-b border-gray-100 hover:bg-gray-50 transition-colors">
                  <div class="flex justify-between items-start">
                    <div>
                      <h4 class="font-medium text-gray-800">第一轮面试安排公告</h4>
                      <p class="text-sm text-gray-500 mt-1">第一轮面试将在13教407进行，时间暂定</p>
                    </div>
                    <span class="text-xs text-gray-400">1天前</span>
                  </div>
                </a>
          
                <a href="#" class="block p-4 border-b border-gray-100 hover:bg-gray-50 transition-colors">
                  <div class="flex justify-between items-start">
                    <div>
                      <h4 class="font-medium text-gray-800">2025年招新宣讲会通知</h4>
                      <p class="text-sm text-gray-500 mt-1">时间地点暂定</p>
                    </div>
                    <span class="text-xs text-gray-400">3天前</span>
                  </div>
                </a>
          
                <a href="#" class="block p-4 hover:bg-gray-50 transition-colors">
                  <div class="flex justify-between items-start">
                    <div>
                      <h4 class="font-medium text-gray-800">实验室招新政策说明</h4>
                      <p class="text-sm text-gray-500 mt-1">大家积极报名，欢迎大家加入实验室</p>
                    </div>
                    <span class="text-xs text-gray-400">1周前</span>
                  </div>
                </a>
              </div>
          
              <div class="p-3 bg-gray-50 text-center">
                <a href="#notices" class="text-primary text-sm hover:underline">以上为全部通知</a>
              </div>
            </div>
          </div>
          
          <a href="login.html" class="nav-link text-dark  font-medium transition-colors" target="_self">登录</a>
        </nav>

        <!-- 移动端菜单按钮 -->
        <button id="menu-toggle" class="md:hidden text-dark hover:text-primary focus:outline-none">
          <i class="fa fa-bars text-2xl"></i>
        </button>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white border-t animate-fade-in">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#home" class="block py-2 text-dark hover:text-primary font-medium transition-colors">首页</a>
        <!-- <a href="#forum" class="block py-2 text-dark hover:text-primary font-medium transition-colors">招新论坛</a> -->
        <a href="#apply" class="block py-2 text-dark hover:text-primary font-medium transition-colors">在线报名</a>
        <a href="#result" class="block py-2 text-dark hover:text-primary font-medium transition-colors">结果查询</a>
        <!-- <a href="#notices" class="block py-2 text-dark hover:text-primary font-medium transition-colors">通知公告</a> -->
          <!-- 移动端通知公告 -->
          <div class="border-t border-gray-100 pt-3">
            <button id="mobile-notice-toggle"
              class="flex items-center justify-between w-full text-left py-2 text-dark hover:text-primary font-medium transition-colors">
              通知公告
              <span class="flex items-center">
                <span class="w-2 h-2 bg-danger rounded-full mr-2"></span>
                <i class="fa fa-chevron-down text-xs transition-transform duration-200"></i>
              </span>
            </button>
          
            <div id="mobile-notice-list" class="hidden pl-4 mt-2 space-y-2 border-l-2 border-primary/30">
              <a href="#" class="block py-2 text-sm text-gray-600 hover:text-primary">招新报名截止时间延长通知</a>
              <a href="#" class="block py-2 text-sm text-gray-600 hover:text-primary">第一轮面试安排公告</a>
              <a href="#" class="block py-2 text-sm text-gray-600 hover:text-primary">2025年招新宣讲会通知</a>
              <a href="#" class="block py-2 text-sm text-gray-600 hover:text-primary">实验室招新政策说明</a>
              <a href="#notices" class="block py-2 text-sm text-primary hover:underline">查看全部通知</a>
            </div>
        <a href="login.html" class="block py-2 text-dark hover:text-primary font-medium transition-colors"
          target="_blank">登录</a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main>
    <!-- 英雄区域 -->
    <section id="home" class="pt-24 md:pt-32 pb-16 md:pb-24 bg-gradient-to-br from-primary/5 to-secondary/10">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 mb-10 md:mb-0 animate-slide-up">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-4">
              加入我们，<br>
              <span class="text-primary">探索互联网的无限可能</span>
            </h1>
            <p class="text-gray-600 text-lg md:text-xl mb-8 max-w-lg">
              互联网实验室2025年度招新正式启动！欢迎大家积极参与报名！
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
              <a href="#apply" class="btn-primary text-center">
                立即报名 <i class="fa fa-arrow-right ml-2"></i>
              </a>
              <a href="#forum" class="btn-secondary text-center">
                了解更多 <i class="fa fa-info-circle ml-2"></i>
              </a>
            </div>

            <!-- 招新数据 -->
            <div class="grid grid-cols-3 gap-4 mt-12">
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">200+</div>
                <div class="text-gray-600 text-sm">报名人数</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">暂定</div>
                <div class="text-gray-600 text-sm">录取名额</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">4</div>
                <div class="text-gray-600 text-sm">技术方向</div>
              </div>
            </div>
          </div>

          <div class="md:w-1/2 animate-fade-in">
            <div class="relative">
              <div class="absolute -top-4 -left-4 w-24 h-24 bg-accent/20 rounded-full blur-xl"></div>
              <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary/20 rounded-full blur-xl"></div>
              <img src="https://picsum.photos/600/400?random=1" alt="互联网实验室团队合作场景"
                class="w-full h-auto rounded-2xl shadow-xl relative z-10">
              <!-- 装饰元素 -->
              <div class="absolute top-1/4 -right-4 bg-white p-3 rounded-lg shadow-lg z-20 animate-pulse-slow">
                <div class="flex items-center gap-2">
                  <div class="w-3 h-3 bg-success rounded-full"></div>
                  <span class="font-medium text-sm">招新进行中</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 招新时间线 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">招新流程</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">了解我们的招新时间安排和流程，做好充分准备</p>
        </div>

        <div class="relative">
          <!-- 时间线中轴线 -->
          <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gray-200"></div>

          <!-- 时间线项目 -->
          <div class="space-y-16 relative">
            <!-- 阶段1 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover">
                  <h3 class="text-xl font-bold text-dark mb-2">报名阶段</h3>
                  <p class="text-gray-600 mb-2">填写在线报名表，提交个人信息和相关材料</p>
                  <div class="text-primary font-medium">9月-10月</div>
                </div>
              </div>

              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-file-text-o"></i>
              </div>

              <div class="md:w-1/2 md:pl-12 hidden md:block"></div>
            </div>

            <!-- 阶段2 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 hidden md:block"></div>

              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-comments"></i>
              </div>

              <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover">
                  <h3 class="text-xl font-bold text-dark mb-2">面试阶段</h3>
                  <p class="text-gray-600 mb-2">基础知识考核与简单技能测试</p>
                  <div class="text-primary font-medium">10月-11月</div>
                </div>
              </div>
            </div>

            <!-- 阶段3 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover">
                  <h3 class="text-xl font-bold text-dark mb-2">结果公示</h3>
                  <p class="text-gray-600 mb-2">公布录取名单，发放录取通知</p>
                  <div class="text-primary font-medium">11月</div>
                </div>
              </div>

              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-code"></i>
              </div>

              <div class="md:w-1/2 md:pl-12 hidden md:block"></div>
            </div>

            <!-- 阶段4 -->
            <div class="flex flex-col md:flex-row items-center">
              <div class="md:w-1/2 md:pr-12 hidden md:block"></div>

              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10">
                <i class="fa fa-check-circle"></i>
              </div>

              <div class="md:w-1/2 md:pl-12">
                <div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover">
                  <h3 class="text-xl font-bold text-dark mb-2">上课阶段</h3>
                  <p class="text-gray-600 mb-2">项目制作团队协作</p>
                  <div class="text-primary font-medium">大一上期间</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 在线报名 -->
    <section id="apply" class="section-padding bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">在线报名</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">填写下方表单，加入我们的互联网实验室大家庭</p>
        </div>

        <div class="max-w-4xl mx-auto">
          <div class="bg-gray-50 rounded-2xl shadow-sm p-8">
            <form id="application-form" class="space-y-6">
              <!-- 个人信息 -->
              <div>
                <h3 class="text-xl font-bold mb-6 pb-2 border-b border-gray-200">个人基本信息</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label for="name" class="block text-gray-700 font-medium mb-2">姓名 <span
                        class="text-danger">*</span></label>
                    <input type="text" id="name" class="input-field" placeholder="请输入您的姓名" required>
                  </div>
                  <div>
                    <label for="student-id" class="block text-gray-700 font-medium mb-2">学号 <span
                        class="text-danger">*</span></label>
                    <input type="text" id="student-id" class="input-field" placeholder="请输入您的学号" required>
                  </div>
                  <div>
                    <label for="major" class="block text-gray-700 font-medium mb-2">专业班级 <span
                        class="text-danger">*</span></label>
                    <input type="text" id="major" class="input-field" placeholder="例如互联网24-3" required>
                  </div>
                  <div>
                    <label for="grade" class="block text-gray-700 font-medium mb-2">年级 <span
                        class="text-danger">*</span></label>
                    <select id="grade" class="input-field" required>
                      <option value="" disabled selected>请选择您的年级</option>
                      <option value="freshman">大一</option>
                      <option value="sophomore">大二</option>
                      <option value="junior">大三</option>
                      <option value="senior">大四</option>
                      <option value="graduate">研究生</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[200px]">
                  <label for="math-score" class="block text-gray-700 font-medium mb-2">高考数学成绩 <span
                      class="text-danger">*</span></label>
                  <input type="text" id="math-score"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    placeholder="请输入高考数学成绩" required>
                </div>
                <div class="flex-1 min-w-[200px]">
                  <label for="english-score" class="block text-gray-700 font-medium mb-2">高考英语成绩 <span
                      class="text-danger">*</span></label>
                  <input type="text" id="english-score"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    placeholder="请输入高考英语成绩" required>
                </div>
              </div>
              <div class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[200px]">
                  <label for="expertise" class="block text-gray-700 font-medium mb-2">擅长领域 <span
                      class="text-danger">*</span></label>
                  <input type="text" id="expertise"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    placeholder="请输入您的擅长领域" required>
                </div>
                <!-- <div class="flex-1 min-w-[200px]">
                  <label for="application-time" class="block text-gray-700 font-medium mb-2">申请时间 <span
                      class="text-danger">*</span></label>
                  <input type="date" id="application-time"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                    required>
                </div> -->
              </div>
              <div>
                <label for="projectExperience" class="block text-gray-700 font-medium mb-2">项目经历 <span
                    class="text-danger">*</span></label>
                <textarea id="projectExperience"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all resize-none"
                  rows="6" placeholder="请详细描述您参与过的项目经历，包括项目名称、您的角色、负责的工作内容及成果等..." required></textarea>
                <p class="text-sm text-gray-500 mt-1">请详细描述，有助于更好地了解您的经验</p>
              </div>
              <div>
                <label for="otherLabRegistration" class="block text-gray-700 font-medium mb-2">其他实验室报名情况</label>
                <textarea id="otherLabRegistration"
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all resize-none"
                  rows="3" placeholder="如有报名其他实验室，请在此说明相关情况..."></textarea>
                <p class="text-sm text-gray-500 mt-1">非必填项，如有相关情况可简要说明</p>
              </div>
              <div class="w-full">
                <label for="futureDevelopment" class="block text-gray-700 font-medium mb-2">未来发展 <span
                    class="text-danger">*</span></label>
                <textarea id="futureDevelopment"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all resize-none"
                  rows="4" placeholder="请谈谈您对个人长远发展的设想和期望..." required></textarea>
                <p class="text-sm text-gray-500 mt-1">请简述您的职业发展方向和目标</p>
              </div>
              <div>
                <label for="email" class="block text-gray-700 font-medium mb-2">邮箱 <span
                    class="text-danger">*</span></label>
                <input type="email" id="email" class="input-field" placeholder="请输入您的邮箱" required>
              </div>
              <div>
                <label for="phone" class="block text-gray-700 font-medium mb-2">手机号码 <span
                    class="text-danger">*</span></label>
                <input type="tel" id="phone" class="input-field" placeholder="请输入您的手机号码" required>
              </div>
          </div>
        </div>

        <!-- 意向方向 -->
        <div>
          <h3 class="text-xl font-bold mb-6 pb-2 border-b border-gray-200">意向方向</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex items-center">
              <input type="checkbox" id="direction-1"
                class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="direction-1" class="ml-2 text-gray-700">前端开发</label>
            </div>
            <div class="flex items-center">
              <input type="checkbox" id="direction-2"
                class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="direction-2" class="ml-2 text-gray-700">后端开发</label>
            </div>
            <div class="flex items-center">
              <input type="checkbox" id="direction-3"
                class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="direction-3" class="ml-2 text-gray-700">产品</label>
            </div>
            <div class="flex items-center">
              <input type="checkbox" id="direction-4"
                class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
              <label for="direction-4" class="ml-2 text-gray-700">人工智能</label>
            </div>

          </div>

          <div class="mt-4">
            <label for="direction-other" class="block text-gray-700 font-medium mb-2">其他意向（可选）</label>
            <input type="text" id="direction-other" class="input-field" placeholder="请输入其他意向方向">
          </div>
        </div>



        <!-- 提交按钮 -->
        <div class="pt-4">
          <button type="submit" class="btn-primary w-full md:w-auto">
            提交报名 <i class="fa fa-paper-plane ml-2"></i>
          </button>
          <p class="text-gray-500 text-sm mt-3">
            提交即表示您同意实验室的招新条款和隐私政策，我们将妥善保管您的个人信息。
          </p>
        </div>
        </form>
      </div>
      </div>
      </div>
    </section>

    <!-- 结果查询 -->
    <section id="result" class="section-padding bg-gradient-to-br from-primary/5 to-secondary/10">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">面试结果查询</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">输入您的信息，查询面试结果</p>
        </div>

        <div class="max-w-md mx-auto">
          <div class="bg-white rounded-2xl shadow-sm p-8">
            <form id="result-form" class="space-y-6">
              <div>
                <label for="query-name" class="block text-gray-700 font-medium mb-2">姓名 <span
                    class="text-danger">*</span></label>
                <input type="text" id="query-name" class="input-field" placeholder="请输入您的姓名" required>
              </div>

              <div>
                <label for="query-id" class="block text-gray-700 font-medium mb-2">学号 <span
                    class="text-danger">*</span></label>
                <input type="text" id="query-id" class="input-field" placeholder="请输入您的学号" required>
              </div>

              <div>
                <label for="query-phone" class="block text-gray-700 font-medium mb-2">手机号码 <span
                    class="text-danger">*</span></label>
                <input type="tel" id="query-phone" class="input-field" placeholder="请输入您的手机号码" required>
              </div>

              <button type="submit" class="btn-primary w-full">
                查询结果 <i class="fa fa-search ml-2"></i>
              </button>
            </form>

            <!-- 结果展示区域 (默认隐藏) -->
            <!-- <div id="result-display" class="mt-8 hidden">
              <div class="p-6 rounded-xl border-2 border-success bg-success/5 text-center">
                <div class="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <i class="fa fa-check text-2xl text-success"></i>
                </div>
                <h3 class="text-xl font-bold text-dark mb-2">恭喜您通过面试！</h3>
                <p class="text-gray-600 mb-4">您已成功加入互联网实验室，请留意后续通知</p>
                <div class="text-gray-700 font-medium">
                  录取方向：<span class="text-primary">前端开发</span>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section> -->


  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- 实验室信息 -->
        <div>
          <div class="flex items-center space-x-2 mb-6">
            <img src="../img/logo.png" alt="互联网实验室logo" class="w-10 h-10 rounded-lg">
            <span class="text-xl font-bold">互联网实验室</span>
          </div>
          <p class="text-gray-400 mb-6">
            探索前沿科技，培养创新人才，为互联网行业发展贡献力量。
          </p>
          <div class="flex space-x-4">
            <a href="#"
              class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#"
              class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#"
              class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-github"></i>
            </a>
          </div>
        </div>

        <!-- 快速链接 -->
        <div>
          <h3 class="text-lg font-bold mb-6">快速链接</h3>
          <ul class="space-y-3">
            <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
            <li><a href="#forum" class="text-gray-400 hover:text-white transition-colors">招新论坛</a></li>
            <li><a href="#apply" class="text-gray-400 hover:text-white transition-colors">在线报名</a></li>
            <li><a href="#result" class="text-gray-400 hover:text-white transition-colors">结果查询</a></li>
            <li><a href="#notices" class="text-gray-400 hover:text-white transition-colors">通知公告</a></li>
          </ul>
        </div>

        <!-- 联系方式 -->
        <div>
          <h3 class="text-lg font-bold mb-6">联系我们</h3>
          <ul class="space-y-3">
            <li class="flex items-start">
              <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
              <span class="text-gray-400">湖南农业大学13教409</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-phone text-primary mt-1 mr-3"></i>
              <span class="text-gray-400">qq群：625515470</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-envelope text-primary mt-1 mr-3"></i>
              <span class="text-gray-400">csecl</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-clock-o text-primary mt-1 mr-3"></i>
              <span class="text-gray-400">周一至周五 9:00-18:00</span>
            </li>
          </ul>
        </div>

        <!-- 订阅通知 -->
        <div>
          <h3 class="text-lg font-bold mb-6">订阅通知</h3>
          <p class="text-gray-400 mb-4">
            订阅我们的通知，及时了解招新动态和实验室最新消息。
          </p>
          <form class="flex">
            <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
            <button type="submit" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors">
              <i class="fa fa-paper-plane"></i>
            </button>
          </form>
        </div>
      </div>

      <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
        <p>© 2025 互联网创新实验室 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 返回顶部按钮 -->
  <button id="back-to-top"
    class="fixed bottom-8 right-8 w-12 h-12 bg-primary text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90 focus:outline-none">
    <i class="fa fa-chevron-up"></i>
  </button>

  <!-- JavaScript -->
  <script src="/js/index.js"></script>
  <script src="/js/enroll.js"></script>
  <script>
    // 移动端通知菜单切换
    const mobileNoticeToggle = document.getElementById('mobile-notice-toggle');
    const mobileNoticeList = document.getElementById('mobile-notice-list');

    if (mobileNoticeToggle && mobileNoticeList) {
      mobileNoticeToggle.addEventListener('click', () => {
        const chevron = mobileNoticeToggle.querySelector('.fa-chevron-down');
        mobileNoticeList.classList.toggle('hidden');
        chevron.classList.toggle('rotate-180');
      });
    }
  </script>
</body>

</html>